<template>
  <el-form label-position="left" label-width="14px" :inline="true" :model="state.dataForm"
    @keyup.enter="state.getDataList()">
    <div style="font-size: 16px;">
      <el-radio></el-radio>联络结果查询列表
    </div>
  </el-form>
  <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
    v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
    <el-table-column type="selection"></el-table-column>
    <el-table-column align="center" prop="lrdLinkState" label="联络状态" width="90"></el-table-column>
    <el-table-column align="center" prop="linkResult" label="联络结果" width="110"></el-table-column>
    <el-table-column align="center" prop="personName" label="姓名" width="100"></el-table-column>
    <el-table-column align="center" prop="company" label="公司名称" width="200"></el-table-column>
    <el-table-column align="center" prop="mobile" label="联络号码" width="120"></el-table-column>
    <el-table-column align="center" prop="thyResult" label="联络历史" width="180"></el-table-column>
    <el-table-column align="center" prop="thyRecordFile" label="通话录音">
      <template v-slot="scope">
        <audio :src="scope.row.thyRecordFile" type="audio/mpeg" controls class="video"></audio>
      </template>
    </el-table-column>
    <el-table-column align="center" prop="thyTimeSpan" label="通话时长" width="90"></el-table-column>
    <el-table-column align="center" prop="lrdPlanTime" label="计划联络时间" width="180"></el-table-column>
    <el-table-column align="center" prop="lrdRemark" label="备注" width="80"></el-table-column>
    <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="80">
      <template v-slot="scope">
        <el-button v-if="state.hasPermission('crm:crmlinkrecord:delete')" link type="danger"
          @click="state.deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination :current-page="state.page" :page-sizes="[15, 20, 50, 100]" :page-size="state.limit"
    :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
    @current-change="state.pageCurrentChangeHandle"> </el-pagination>
</template>
<script lang="ts" setup>
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, watch } from "vue";
const view = reactive({
  getDataListURL: '/crm/crmlinkrecord/page',
  getDataListIsPage: true,
  deleteURL: "/crm/crmlinkrecord",
  deleteIsBatch: true,
  dataForm: {
    id: "",
    name: "",
    source: "",
    state: "",
    input: "",
    value1: "",
  }
});
const state = reactive({ ...useView(view), ...toRefs(view) });
const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addKey.value++;
  nextTick(() => {
    addOrUpdateRef.value.init(id);
  });
};
</script>

<style lang="scss" scoped>
.el-table {
  text-align: center;
}

.el-table-column {
  text-align: center;
}

.box {
  text-align: left;
  margin-top: 100px;
}

.box1 {
  text-align: left;
}

.el-button {
  margin-left: 10px;
}

::v-deep .el-table .cell {
  white-space: nowrap;
  font-size: 13px;
  height: 18px;
  line-height: 18px;
}

::v-deep .video {
  width: 240px;
  height: 20px;
}
</style>
